<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        ul,
        ol {
            list-style: none;
            padding: 0px;
            margin: 0px;
        }

        #main {
            width: 600px;
            height: 350px;
            margin: 30px auto;
            position: relative;
        }

        #display {
            width: 600px;
            height: 350px;
            overflow: hidden;
            position: relative;
            -webkit-user-select: none;
        }

        #display ul {
            position: relative;
            left: 0;
            top: 0px;
            width: 3600px;
            height: 350px;
            transition: left 500ms linear;
        }

        #list li {
            float: left;
            width: 600px;
            height: 350px;
        }

        #arrow {
            display: none;
        }

        #arrow span {
            position: absolute;
            width: 40px;
            height: 40px;
            line-height: 40px;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            text-align: center;
            font-weight: bold;
            font-family: 黑体, SimHei;
            font-size: 30px;
            color: #fff;
            opacity: 0.4;
            border: 1px solid #fff;
            -webkit-user-select: none;
        }

        #arrow span:hover {
            opacity: 0.7;
        }

        #arrow #right {
            right: 5px;
            left: auto;
        }

        #index_container {
            position: absolute;
            width: 210px;
            height: 30px;
            right: 20px;
            bottom: 20px;
        }

        #index_container .index {
            float: left;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            opacity: 0.8;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
            -webkit-user-select: none;
        }

        #index_container .current {
            background: #ec3d3d;
        }
    </style>
    <script>
    </script>
</head>
<body>
<div id="main">
    <div id="display">
        <ul id="list">
            <li><img src="10.jpg" width="600" height="350"/></li>
            <li><img src="images/14.jpg" width="600" height="350"/></li>
            <li><img src="![](../images/16.jpg)" width="600" height="350"/></li>
            <li><img src="images/preview.jpg" width="600" height="350"/></li>
            <li><img src="images\10.jpg" width="600" height="350"/></li>
        </ul>
        <ol id="index_container"></ol>
        <div id="arrow">
            <span id="left" title="前一张"><</span>
            <span id="right" title="后一张">></span>
        </div>
    </div>
</div>
</body>
<script>
    window.onload = () => {
        let list = document.getElementById('list');
        let ol = document.getElementsByTagName('ol')[0];
        let display = document.getElementById('display');
        let currentIndex = 0;
        let autoPlay = () => {
            window.autoPlay = true;
            window.autoPlayTimer = setInterval(() => move((currentIndex + 1) % 5), 2000);
        }
        let stopPlay = () => {
            if (window.autoPlay) {
                window.autoPlay = false;
                clearInterval(window.autoPlayTimer);
            }
        }
        //创建索引按钮
        for (let i = 0; i < 5; i++) {
            let li = document.createElement('li');
            li.textContent = String(i + 1);
            li.className = 'index';
            if (i == 0) li.className += ' current';
            li.index = i;
            ol.appendChild(li);
            li.addEventListener('mouseover', function() {
                move(this.index);
                stopPlay();
            });
        }
        let arrow = document.getElementById('arrow');
        let showArrow = () => arrow.style.display = 'block';
        let hideArrow = () => arrow.style.display = 'none';
        //核心move函数
        let move = (index) => {
            let width = display.offsetWidth;
            for (let i = 0; i < 5; i++) {
                //改变当前索引按钮
                if ((index % 5) === i) {
                    ol.children[i].className = 'index current';
                } else ol.children[i].className = 'index';
            }
            //移动lists
            list.style.left = (-index) * width + 'px';
            currentIndex = index;
        }
        display.addEventListener('mouseover', showArrow)
        display.addEventListener('mouseleave', () => {
            hideArrow();
            if (!window.autoPlay) {
                //重新开始自动播放
                autoPlay();
            }
        })

        let left = document.getElementById('left');
        let right = document.getElementById('right');
        left.addEventListener('click', () => {
            move((currentIndex - 1) === -1 ? 4 : currentIndex - 1);
            stopPlay();
        });
        right.addEventListener('click', () => {
            move((currentIndex + 1) % 5);
            stopPlay();
        });

        //启动自动播放
        move(0);
        autoPlay();
    }
</script>
</html>